<template>
  <div :id="ueditorModel">
    <vue-ueditor-wrap :config="editorConfig" v-model="message" @ready="ready" :destroy="true" @beforeInit="addCustomDialog"></vue-ueditor-wrap>
    <p style="padding:10px;font-size:12px;color:red;">(图片放大缩小后，先点击上下左右键出现光标再行编辑)</p>
    <div :id="quillUploads">
      <el-upload :action="PERSONUPLOAD" :show-file-list="false" :on-success="handleBeforeUpload" :before-upload="beforeUpload">
      </el-upload>
    </div>
  </div>
</template>
<script>
import api from '@/api/apis';
import VueUeditorWrap from 'vue-ueditor-wrap';
import upload from '@/assets/img/upload.jpg';
export default {
  name: "Editor",
  components: {
    VueUeditorWrap
  },
  props: ["content"],
  data() {
    return {
      ueditorModel: 'ueditorModel' + new Date().getTime(),
      quillUploads: 'quillUploads' + new Date().getTime(),
      PERSONUPLOAD: this.$API.ASSET_SERVER_URL+ this.$API.LOGIN_IMG,
      myEditor: '',
      message: '',
      // 简单配置
      editorConfig: {
        autoHeightEnabled: false, //编译器不自动被内容撑高
        initialFrameHeight: 700, //初始容器高度
        initialFrameWith: "100%",
        serverUrl: api.LOGIN_IMG, //上传文件地址
        UEDITOR_HOME_URL: "./UEditor/", //UEditor资源文件的存放路径
        // UEDITOR_HOME_URL: "", //UEditor资源文件的存放路径
      }
    };
  },
  mounted() {
    // 这里是从列表页编辑时做的内容注入，没有需要可以不写
  },
  watch: {
    content: function (val) {
      if (this.myEditor) this.message = val;
    },
  },
  methods: {
    ready(editorInstance) {
      this.myEditor = editorInstance;
      this.message = this.content;
      this.addCustomDialog(this.myEditor)
    },
    getContent() {
      return this.myEditor.getContent();
    },
    addCustomDialog(editorId) {
      let that = this;
      window.UE.registerUI(
        "test-dialog",
        function (editor, uiName) {
          // 参考http://ueditor.baidu.com/doc/#COMMAND.LIST
          var btn = new window.UE.ui.Button({
            name: "dialog-button",
            title: "上传图片",
            cssRules: `background-image: url(${upload}) !important;background-size: cover;`,
            onclick: function () {
              // 渲染dialog
              document.querySelector(`#${that.quillUploads} .el-upload__input`).click();
            }
          });

          return btn;
        },
        56 /* 指定添加到工具栏上的那个位置，默认时追加到最后 */,
        editorId /* 指定这个UI是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
      );
    },
    uploadFile(url) {
      let editor = document.querySelector(`#${this.ueditorModel} .edui-default`).getAttribute("id");
      window.UE.getEditor(editor).execCommand("insertimage", {
        src: url
      });
    },
    //附件上传
    handleBeforeUpload(response) {
      console.log('response', response)
      this.loading.close();
      if (response.code == 1) {
        this.uploadFile(api.ASSET_IMAGES_URL + response.data)
      } else {
        this.$message.error("上传失败");
      }
    },
    beforeUpload: function (file) {
      var FileExt = file.name.replace(/.+\./, '');
      if (['jpg', 'jpeg', 'png'].indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: 'warning',
          message: '请上传jpg,jpeg,png格式文件！'
        });
        return false;
      }
      this.loading = this.$loading({ text: '加载中...' });
    },
  },
  beforeDestroy() {
    let el = document.getElementById(this.ueditorModel);
    if (el) {
      el.innerHTML = '';
    }
  },
};
</script>